<template>
  <div>
    <vxe-toolbar>
      <template v-slot:buttons>
        <vxe-button
          status="primary"
          content="导出Excel"
          @click="exportExcel"
        ></vxe-button>
      </template>
    </vxe-toolbar>
    <div class="title">
      自定义行高、列宽
    </div>
    <vxe-table
      border
      show-header-overflow
      show-overflow
      highlight-hover-row
      align="center"
      :data="tableData"
    >
      <vxe-table-column
        field="name"
        title="名称"
        width="120"
      ></vxe-table-column>
      <vxe-table-column field="sex" title="性别" width="120"></vxe-table-column>
      <vxe-table-column field="age" title="年龄"></vxe-table-column>
      <vxe-table-column field="address" title="地址"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
import mixin from './mixin'
export default {
  mixins: [mixin],
  data() {
    return {
      tableData: [
        {
          name: 'Test1',
          sex: 'Man',
          age: 28,
          address: 'test abc',
        },
        {
          name: 'Test2',
          sex: 'Women',
          age: 22,
          address: 'Guangzhou',
        },
        {
          name: 'Test3',
          sex: 'Man',
          age: 32,
          address: 'Shanghai',
        },
        {
          name: 'Test4',
          sex: 'Women ',
          age: 24,
          address: 'Shanghai',
        },
      ],
      title: [],
    }
  },
}
</script>

<style scoped>
.title {
  text-align: center;
  line-height: 40px;
  background-color: #e8eaec5e;
  font-size: 20px;
  color: #606266;
  font-weight: bold;
  border-top: 1px solid #e8eaec;
  border-left: 1px solid #e8eaec;
  border-right: 1px solid #e8eaec;
}
</style>
